<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <div class="container">
        <!-- 选项卡 -->
        <ul class="nav nav-tabs">
            <li>
                <a href="#home" class="" data-toggle="tab">home</a>
            </li>
            <li>
                <a href="#info" class="" data-toggle="tab">info</a>
            </li>
            <li>
                <a href="#hot" class="" data-toggle="tab">hot</a>
            </li>

        </ul>
        <!--选项卡面板 -->
        <div class="tab-content">
            <!-- 三个面板  fade效果  fade in active激活状态-->
            <div class="tab-pane fade in active" id="home">
                <p>通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group
                    的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。</p>
            </div>
            <div class="tab-pane fade" id="info">
                <p>为 a、button 或 input 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。</p>
            </div>
            <div class="tab-pane fade" id="hot">
                <p>虽然按钮类可以应用到 a 和 button元素上，但是，导航和导航条组件只支持 button元素。</p>
            </div>
        </div>
    </div>
</body>

</html>